import React from 'react'
import style from './index.less'
import { connect } from 'dva';
import { Row, Col } from 'antd'
import {NoData} from '../../../../components'

/**
 * ToolBar 工具栏
 * 引用组件
 * DefinitionList 定义列表
 * PortSelect 	产品下拉框
 * BenchSelect 基准下拉框
 * TimeRadio 时间段单选组合
 */
import DefinitionList from '../../../../components/DefinitionList'
import PortSelect from '../../../../components/toolbar/PortSelect'
import BenchSelect from '../../../../components/toolbar/BenchSelect'
import TimeRadio from '../../../../components/toolbar/TimeRadio'
import {timeRangeList} from '../../../../utils/dataConfig'
const timeArr=['2','3','4','5','7']
const timeRadioArr=[]
timeArr.map(item=>{
  timeRadioArr.push(timeRangeList.find(it=>it.value===item))
})
const ToolBar = ({lPortId,cBenchCode,timeRange,location}) => (
  <Row className='toolbar' type="flex" justify="space-between" align="bottom">                     
    <Col>
      <DefinitionList name='产品组合：' value={<PortSelect id={lPortId} location={location}  />} />
      <DefinitionList name='业绩基准：' value={<BenchSelect id={cBenchCode} location={location}/>} />
    </Col>
    <Col>
    
    </Col>
  </Row>
)

/**
 * [ContentDisplay 查询结果]
 * 引用组件 
 * StockTop 前5大股票
 * Brinson 股票归因模型
 */
import Brinson from '../../components/Brinson'
const ContentDisplay = (props) => {
  
  return(
    <div className='dataArea'>
    <TimeRadio data={timeRadioArr} value={props.timeRange} {...props} />
      <StockTop {...props} />
      <Brinson className='brinson' {...props} />
    </div>
  )
}

/**
 * StockTop 前5大股票
 * 引入组件
 * StockTopGood 前5大主要贡献
 * StockTopBad	前5大主要拖累
 */
import StockTopGood from '../../components/StockTopGood'
import StockTopBad from '../../components/StockTopBad'
const StockTop=(props)=>(
  <Row gutter={15} className='stockTop'>
    <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{paddingLeft:0,paddingRight:10}}><StockTopGood {...props}/></Col>
    <Col xs={24} sm={24} md={12} lg={12} xl={12} style={{paddingLeft:10,paddingRight:0}}><StockTopBad {...props}/></Col>
  </Row>
)


/**
 * [performanceAttribution 绩效归因]
 * 子组件
 * ToolBar 工具栏
 * ContentDisplay 内容展示
 */
import { Tabtitle } from '../../../../components'
const PerformanceAttribution = (props) => {  
  return (
    <div className={`${style.root}`}>
    {
       (props.lPortId && props.cBenchCode)?<ContentDisplay {...props} />:<NoData />

    }
    </div>
  );
}

export default connect()(PerformanceAttribution)